<template>
  <view :style="{ padding: paddingComputed }">
    <view class="hb-flex hb-justify-between hb-items-center">
      <view class="hb-flex-1">
        <slot name="left">
          <view v-if="title" class="hb-text-base hb-font-medium">{{ title }}</view>
        </slot>
      </view>
      <view class="hb-flex hb-items-center">
        <slot name="right">
          <view class="hb-text-sm hb-mr-2" :style="{ color: rightText ? '#333' : '#969799' }">
            {{ showRightText ? (rightText || '暂未填写') : '' }}
          </view>
        </slot>
        <slot v-if="showIcon" name="icon">
          <text class="ali-icon icon-you1 hb-text-gray-400 hb-text-base"></text>
        </slot>
      </view>
    </view>
    <view v-if="$slots.bottom" class="hb-mt-2">
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    rightText: {
      type: String,
      default: '',
    },
    showRightText: {
      type: Boolean,
      default: true,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    padding: {
      type: Array as PropType<number[]>,
      default: [24, 0],
    },
  });
  const paddingComputed = computed(() => {
    return props.padding.join('rpx ') + 'rpx';
  });
</script>

<style lang="scss" scoped>
  /* 使用WindiCSS，无需额外样式 */
</style>
